<template>
  <div class="main-map-tabmenu">
    <ul>
      <li
        :class="{ active: active == item.id }"
        v-for="(item, index) in menuList"
        :key="index"
        @click="selectFunc(item)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //当前选择
      active: 1,
      //切换菜单
      menuList: [
        {
          id: 1,
          name: "概况",
        },
        {
          id: 2,
          name: "照明",
        },
        {
          id: 3,
          name: "屏幕",
        },
        {
          id: 4,
          name: "监控",
        },
        {
          id: 5,
          name: "广播",
        },
        {
          id: 6,
          name: "充电",
        },
        {
          id: 7,
          name: "气象",
        },
        {
          id: 8,
          name: "5G",
        },
        {
          id: 9,
          name: "报警",
        },
      ],
    };
  },
  methods: {
    /**
     * 切换菜单
     */
    selectFunc(item) {
      this.active = item.id;
    },
  },
};
</script>

<style lang="scss">
.main-map-tabmenu {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60px;
  z-index: 1;
  background-color: $main_color_3;
  box-shadow: 1px 0 6px $main_color_3;

  li {
    padding: 16px 0;
    text-align: center;
    line-height: 18px;
    color: $color-white;
    cursor: pointer;
    &.active {
      background-color: #053e92;
    }
  }
}
</style>